<html>

<head>
    <title>5-样式</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
        #typeSelect {
            margin-bottom: 10px;
        }
    </style>
</head>
<!-- 
1. ctx.fillStyle = color
2. ctx.strokeStyle = color
3. ctx.globalAlpha = 1 (取值为0-1)
4. ctx.createLinearGradient 线性渐变
5. ctx.createRadialGradient 径向渐变
6. ctx.createConicGradient 锥形渐变
7. ctx.createPattern(image, repetition) 图案样式
8. ctx.shadowColor/ctx.shadowOffsetX/ctx.shadowOffsetY/ctx.shadowBlur 阴影设置

color: 符合CSS3 颜色值标准既可。如:orange/#FFA500/rgb(255,165,0)/rgba(255,165,0,1)
-->
<div>
    <select id="typeSelect">
        <option value="1">fillStyle</option>
        <option value="2">strokeStyle</option>
        <option value="3">globalAlpha</option>
        <option value="4">createLinearGradient</option>
        <option value="5">createRadialGradient</option>
        <option value="6">createConicGradient</option>
        <option value="7">createPattern</option>
        <option value="8">shadow</option>
        <option value="9">填充规则</option>
    </select>
</div>

<canvas id="tutorial" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById('tutorial');
    //获得 2d 上下文对象
    var ctx = canvas.getContext("2d");

    function randomInt(from, to) {
        return parseInt(Math.random() * (to - from + 1) + from);
    }

    function draw(type) {
        ctx.clearRect(0, 0, 500, 500)
        switch (Number(type)) {
            case 1:
                fillRect()
                break;
            case 2:
                strokeRect()
                break;
            case 3:
                break;
            case 4:
                createLinearGradient()
                break;
            case 5:
                createRadialGradient()
                break;
            case 6:
                createConicGradient()
                break;
            case 7:
                createPattern()
                break;
            case 8:
                shadow()
                break;
            case 9:
                fillRule()
                break;
        }
    }
    draw(1);
    function fillRect() {
        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 6; j++) {
                ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
                    Math.floor(255 - 42.5 * j) + ',0)';
                ctx.fillRect(j * 50, i * 50, 50, 50);
            }
        }
    }
    function strokeRect() {
        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 6; j++) {
                ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
                ctx.strokeRect(j * 50, i * 50, 40, 40);
            }
        }
    }
    function createLinearGradient() {
        let linearGradient = ctx.createLinearGradient(0, 0, 120, 120)
        linearGradient.addColorStop(0, 'red')
        linearGradient.addColorStop(0.25, 'green')
        linearGradient.addColorStop(0.5, 'pink')
        linearGradient.addColorStop(0.75, 'orange')
        linearGradient.addColorStop(1, 'blue')
        ctx.fillStyle = linearGradient;
        ctx.fillRect(0, 0, 120, 120);
    }
    function createRadialGradient() {
        const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

        gradient.addColorStop(0, "pink");
        gradient.addColorStop(0.5, "white");
        gradient.addColorStop(1, "purple");

        ctx.fillStyle = gradient;
        ctx.fillRect(20, 20, 160, 160);


        // 辅助线 S
        ctx.beginPath()
        ctx.fillStyle = 'red'
        ctx.arc(110, 90, 2, 0, Math.PI * 2, true);
        ctx.fill();
        ctx.strokeStyle = 'red'
        ctx.beginPath()
        ctx.arc(110, 90, 30, 0, Math.PI * 2, true);
        ctx.stroke();

        ctx.beginPath()
        ctx.fillStyle = 'green'
        ctx.arc(100, 100, 2, 0, Math.PI * 2, true);
        ctx.fill();
        ctx.beginPath()
        ctx.strokeStyle = 'green'
        ctx.arc(100, 100, 70, 0, Math.PI * 2, true);
        ctx.stroke();

        // 辅助线 E
    }
    function createConicGradient() {
        const gradient = ctx.createConicGradient(Math.PI / 4, 100, 100);

        gradient.addColorStop(0, "red");
        gradient.addColorStop(0.25, "orange");
        gradient.addColorStop(0.5, "yellow");
        gradient.addColorStop(0.75, "green");
        gradient.addColorStop(1, "blue");

        ctx.fillStyle = gradient;
        ctx.fillRect(20, 20, 200, 200);
    }
    function createPattern() {
        const img = new Image();
        img.src = "./img/canvas_create_pattern.png";

        // Only use the image after it's loaded

        img.onload = () => {
            const pattern = ctx.createPattern(img, "repeat");
            ctx.fillStyle = pattern;
            ctx.fillRect(0, 0, 300, 300);
        };
    }
    function shadow() {
        // Shadow
        ctx.shadowColor = "red";
        ctx.shadowOffsetX = 4; // 默认为0 
        ctx.shadowOffsetY = 4; // 默认为0 
        ctx.shadowBlur = 10; // 默认为0 

        // Filled rectangle
        ctx.fillRect(20, 20, 100, 100);

        // Stroked rectangle
        ctx.lineWidth = 6;
        ctx.strokeRect(170, 20, 100, 100);

        // text
        ctx.fillText('周五是个好日子', 20, 170);
    }

    function fillRule() {
        ctx.beginPath();
        ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
        ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
        ctx.fill("evenodd");

        ctx.beginPath();
        ctx.arc(120, 50, 30, 0, Math.PI * 2, true);
        ctx.arc(120, 50, 15, 0, Math.PI * 2, true);
        ctx.fill("nonzero");  // 默认值
    }

    let selector = document.querySelector("#typeSelect")
    selector.addEventListener('change', function () {
        draw(selector.value);
    })



</script>

</html>